<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
      body{
            margin: 0;
            overflow: hidden;
        }
        #canvas{
            background: #000;
        }
        #mycontainer{
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .account{
          color: red;
        }
        .pwd{
          color: red;
        }
    </style>
</head>

<body>
  
  <div class="container mt-5" id="mycontainer">
    <form class="mt-5">
      <div class="form-group row">
        <label for="account" class="col-sm-2 col-form-label account">账号</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" placeholder="账号" id="account">
        </div>
      </div>
      <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label pwd">密码</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword"
            placeholder="Password">
        </div>
      </div>
    </form>
    <div class="row offset-2">
      <div class="col">
        <button type="button" class="btn btn-success" id="admin">管理员登录</button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-success" id="teacher">教师登录</button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-success" id="student">学生登录</button>
      </div>
    </div>
  </div>

  <canvas id="canvas"></canvas>

  <script src="js/jquery-3.3.1.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
  <script src="./js/axios.js"></script>

  <script>
    // 管理员登录
    let admin = document.querySelector('#admin');
    admin.onclick = () => {
      let account = $('#account').val();
      let pwd = $('#inputPassword').val();
      axios({
        url: '/adminLogin',
        method: 'post',
        data: {
          account,
          pwd
        }
      }).then(resp => {
        if (resp.data.msg || !resp.data) {
          alert('账号或者密码错误');
        } else {
          location.href = '/admin.html';
        }
      })
    }

    // 教师登录
    let teacher = document.querySelector('#teacher');
    teacher.onclick = () => {
      let account = $('#account').val();
      let pwd = $('#inputPassword').val();
      axios({
        url: '/teacherLogin',
        method: 'post',
        data: {
          account,
          pwd
        }
      }).then(resp => {
        if (resp.data.msg || !resp.data) {
          alert('账号或者密码错误');
        } else {
          location.href = '/teacher.html';
        }
      })
    }

    // 学生登录
    let student = document.querySelector('#student');
    student.onclick = () => {
      let account = $('#account').val();
      let pwd = $('#inputPassword').val();
      axios({
        url: '/studentLogin',
        method: 'post',
        data: {
          account,
          pwd
        }
      }).then(resp => {
        if (resp.data.msg || !resp.data) {
          alert('账号或者密码错误');
        } else {
          location.href = '/student.html';
        }
      })
    }
  </script>
  <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var circleList = [];//存储圆形
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    canvas.addEventListener('mousemove', function (ev) { 
        // var circle = new Circle(ev.clientX, ev.clientY);
        // circle.draw();
        circleList.push(new Circle(ev.clientX, ev.clientY));
    });

    function random(min, max){
        return Math.round(Math.random() * (max - min) + min);
    }

    function Circle(x, y){
        this.x = x;
        this.y = y;
        this.color = 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) + ')';
        this.vx = (Math.random() - 0.5) * 3;
        this.vy = (Math.random() - 0.5) * 3;
        this.a = 1;
    }

    Circle.prototype={
        draw: function () { 
            context.beginPath();
            context.fillStyle = this.color;
            context.globalAlpha = this.a;   //绘制之前设置全局透明度
            context.globalCompositeOperation = "lighter";
            context.arc(this.x, this.y, 30, 0, Math.PI * 2);
            context.fill();
            this.update();
        },
        update: function () { 
            this.x += this.vx;
            this.y += this.vy;
            this.a *= 0.98;
        }
    }

    function render(){
        context.clearRect(0,0,canvas.width,canvas.height);
        circleList.forEach(function(ele,i){
            ele.draw();
            if(ele.a < 0.05){
                circleList.splice(i, 1);
            }
        });
        requestAnimationFrame(render); //关键帧动画，跟浏览器刷新频率一样 跟递归差不多的用法
    }
    render();
</script>
</body>

</html>